import React from 'react';
import PropTypes from 'prop-types'
import styles from './index.module.css'

const HouseItem=({src,title,desc,tags,price,onClick,style})=>{
    return(
        <div className={styles.house} onClick={onClick} style={style}>
				<div className={styles.imgWrap}>
					<img
						className={styles.img}
						src={src}
						alt=""
					/>
				</div>
				<div className={styles.content}>
					<h3 className={styles.title}>{title}</h3>
					<div className={styles.desc}>{desc}</div>
					<div>
						{tags.map((tag, index) => {
							let tags = "";
							switch (index) {
								case 0:
									tags = styles.tag1;
									break;
								case 1:
									tags = styles.tag2;
									break;
								case 2:
									tags = styles.tag3;
									break;
								default:
									tags = styles.tag3;
							}
							return (
								<span className={`${styles.tag} ${tags}`} key={tag}>
									{tag}
								</span>
							);
						})}
					</div>
					<div className={styles.price}>
						<span className={styles.priceNum}>{price}</span>
						元/月
					</div>
				</div>
			</div>
    )
}

HouseItem.propsTypes={
    src:PropTypes.string,
    title:PropTypes.string,
    desc:PropTypes.string,
    tags:PropTypes.array.isRequired,
    price:PropTypes.number,
    onClick:PropTypes.func,
}

export default HouseItem